<style scoped>
    html,
    body,
    #app {
        height: 100%;
        min-width: 1260px;

    }

    #app {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .ivu-layout {
        height: 44px;
        background: transparent;
    }

    .ivu-layout-header {
        height: 44px;
        line-height: 44px;
        /* background:#2b85e4; */
        background: #2d8cf0;
        padding: 0 20px;
    }

    .layout {
        /* border: 1px solid #d7dde4; */
        background: #f5f7f9;
        position: relative;
        /* border-radius: 4px; */
        overflow: hidden;
    }

    .layout-logo {
        width: 500px;
        height: 44px;
        /* background: #5b6270; */
        /* border-radius: 3px; */
        float: left;
        position: relative;
        top: 0px;
        left: 0;
        font-size: 16px;
        color: white;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .layout-logo small {
        font-size: 12px;
        letter-spacing: 0;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-user {
        width: 100px;
        height: 44px;
        border-radius: 3px;
        float: right;
        position: relative;
        top: 0px;
        right: 0;
        font-size: 13px;
        color: white;
    }

</style>
<template>
    <div class="layout" id='app'>
        <Header>
            <div class="layout-logo">
                <!-- <img src="../../assets/logo-white.png">
                语云网站管家&nbsp;&nbsp; -->
                <img src="../../assets/2222.png" style="height: 40%;">
                    <span style="font-family: YouYuan;">语云数据中间件1.0</span>&nbsp;&nbsp;
                <!-- <small>上次登陆：2019-08-29 13:25 &nbsp;&nbsp;北京市</small> -->
            </div>
            <div class="layout-user">
                <Avatar icon="ios-person"></Avatar>&nbsp;
                <Dropdown trigger="click">
                    <a href="javascript:void(0)" style="color: white;">
                        未登录
                        <Icon type="md-arrow-dropdown" />
                    </a>
                    <DropdownMenu slot="list">
                        <a href="/">
                            <DropdownItem>登录</DropdownItem>
                        </a>

                    </DropdownMenu>
                </Dropdown>
            </div>
        </Header>
        <Layout
            style="display:flex;position: absolute;top: 44px;bottom: 0px;overflow: hidden;width: 100%; height: auto;">

            <Layout :style="{padding: '14px 14px 14px 14px',height:'auto'}">
                <Content :style="{padding: '24px',  background: '#fff'}">
                    <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
                        <Col span="3" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
                        <span style="color: #2d8cf0;">
                            <Icon type="md-speedometer" />&nbsp;&nbsp;找回密码</span>
                        </Col>
                    </Row>
                    <Row style="margin-top: 40px;">
                        <Col span="7" offset="7">
                            <Form ref="ruleForm" :rules="ruleValidate" :model="ruleForm">
                                <FormItem prop="email">
                                    <Input v-model="ruleForm.email" placeholder="请输入注册时填写的电子邮件" />
                                </FormItem>
                            </Form>
                        </Col>
                        <Col span="3">
                            <Button type="primary" @click="findPasswd" style="width: 80%;float: right;">找回密码</Button>
                        </Col>
                    </Row>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    email: ''
                },
                ruleValidate: {
                    email: [
                        {
                            required: true,
                            message: "请输入邮箱",
                            trigger: "blur"
                        },
                        { 
                            type: 'email', 
                            message: '请输入正确格式的邮箱', 
                            trigger: 'blur' 
                        }]
                }
            }
        },
        methods: {
            findPasswd: function () {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let _this = this;
                        let data = this.$qs.stringify({
                            email: this.ruleForm.email
                            
                        })
                        //请根据对应接口修改
                        this.$axios
                            .post(url, data)
                            .then(response => {
                                let res = response.data
                                if (res.code == 0) {
                                    _this.$router.replace({ name: 'FindPassword2', params: { email:this.ruleForm.email } });
                                } else if (res.code != 0) {
                                    alert(res.message);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                })
            }
        }
    }
</script>